<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8" />
        <title>1.基本使用</title>
        <!-- 引入Vue -->
        <script type="text/javascript" src="../js/vue.js"></script>
    </head>
    <body>

        <!-- 使用组件的三大步骤:
            1.创建组件  Vue.extend(options)
            2.注册组件  components{组件名:组件}
            3.写组件标签    <School></School>
        -->

        <!-- 准备好一个容器-->
        <div id="demo">
            <School></School>
            <Person></Person>
        </div>
    </body>

    <script type="text/javascript">
        //阻止 vue 在启动时生成生产提示。
        Vue.config.productionTip = false
        const School = Vue.extend({
            template:`
            <div>
                <h2>学校名称:{{sname}}</h2>
					<h2>学校地址:{{address}}</h2>
					<button @click="sname+='~'">修改学校名</button>
					<button @click="welcome">欢迎同学们</button>
                </div>
            `,
            data(){
                return {
                    sname:'尚硅谷',
					address:'宏福科技园',
                }
            },
            methods: {
                welcome(){
                    alert(`${this.sname}欢迎你`)
                }
            }
        })

        const person = Vue.extend({
            template:`
            <div>
                <h2>人名:{{pname}}</h2>
				<h2>年龄:{{age}}</h2>
				<button @click="age++">年龄+1</button>
				<button @click="speak">说话</button>
                </div>
            `,
            data(){
                return {
                    pname:'张三',
					age:18
                }
            },
            methods: {
                speak(){
					alert('十一期间，一直下雨！')
				}
            }
        })
        new Vue({
            el:'#demo',
            components: {
                School,
                person
            }
        })
    </script>
</html>